<template>
  <div class="wrapper">
    <div class="header">
      <div class="logo"></div>
      <div class="info">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="nav">
      <span>课程管理 /</span>
      <span>选课信息</span>
    </div>
    <div class="list">
      <div class="list1">
        <el-form :inline="true" class="demo-form-inline" size="mini">
          <el-form-item label="学校名称">
            <el-input  class="inp" placeholder="请输入学校名称" ></el-input>
          </el-form-item>
          <el-form-item label="学生姓名">
            <el-input class="inp" placeholder="请输入学生姓名"></el-input>
          </el-form-item>
          <el-form-item label="全部课程">
            <el-select class="inp" placeholder="全部课程">
              <el-option label="课程1" value="project"></el-option>
              <el-option label="课程2" value="project"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别" class="inp3">
            <el-select class="inp" placeholder="全部性别">
              <el-option label="男" value="sex"></el-option>
              <el-option label="女" value="sex"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级" class="inp3">
            <el-select class="inp" placeholder="全部班级">
              <el-option label="班级1" value="class"></el-option>
              <el-option label="班级2" value="class"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="sub">
          <el-button class="sear">查询</el-button>
          <el-button class="reset">重置</el-button>
        </div>
      </div>
      <div class="new">
        <el-button class="btn new1">新建</el-button>
        <el-button class="btn out">导出</el-button>
      </div>
      <div class="dataList">
         <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{backgroundColor:'#F7F8FA'}"
          >
          <el-table-column
            prop="num"
            label="编号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="school"
            label="学校"
            width="240">
          </el-table-column>
          <el-table-column
            prop="project"
            label="课程"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="grade"
            label="年级"
            width="120">
          </el-table-column>
          <el-table-column
            prop="class"
            label="班级"
            width="120">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系电话"
            width="160">
          </el-table-column>
          <el-table-column
            prop="time"
            label="时间"
            width="200">
          </el-table-column>
          <el-table-column
            prop="delete"
            label="操作"
            width="120"
            >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'Users',
    data() {
      return {
        tableData: [{
          num: '9044',
          school: '四川大学附属实验小学江安河分校',
          project: '高段足球训练营',
          name: '王文志',
          grade: '一年级',
          class: '四班',
          phone: '18114286644',
          time: '2022-06-28 18:23:42',
          delete: '删除',
        }, {
          num: '8994',
          school: '四川大学附属实验小学江安河分校',
          project: '基础美术',
          name: '孙檗',
          grade: '二年级',
          class: '一班',
          phone: '13605752328',
          time: '2022-06-27 20:57:13',
          delete: '删除',
        }, {
          num: '7569',
          school: '四川大学附属实验小学江安河分校',
          project: '古风书法',
          name: '赵研',
          grade: '三年级',
          class: '七班',
          phone: '13357383807',
          time: '2022-06-27 11:15:16',
          delete: '删除',
        }, {
          num: '6850',
          school: '四川大学附属实验小学江安河分校',
          project: '中段足球训练营',
          name: '郑喜阳',
          grade: '一年级',
          class: '四班',
          phone: '18278246447',
          time: '2022-06-26 21:44:53',
          delete: '删除',
        },{
          num: '5659',
          school: '四川大学附属实验小学江安河分校',
          project: '口风琴弹奏表演',
          name: '赵敏',
          grade: '四年级',
          class: '二班',
          phone: '15518804647',
          time: '2022-06-25 11:20:48',
          delete: '删除',
        },{
          num: '5391',
          school: '四川大学附属实验小学江安河分校',
          project: '高段足球训练营',
          name: '王鹏云',
          grade: '六年级',
          class: '三班',
          phone: '18654937057',
          time: '2022-06-23 21:45:36',
          delete: '删除',
        },{
          num: '4801',
          school: '四川大学附属实验小学江安河分校',
          project: '中段足球训练营',
          name: '赵林',
          grade: '四年级',
          class: '五班',
          phone: '13343457370',
          time: '2022-06-23 12:03:45',
          delete: '删除',
        },{
          num: '3689',
          school: '四川大学附属实验小学江安河分校',
          project: '古风书法',
          name: '李英顺',
          grade: '四年级',
          class: '二班',
          phone: '15138736785',
          time: '2022-06-22 16:12:46',
          delete: '删除',
        },{
          num: '3405',
          school: '四川大学附属实验小学江安河分校',
          project: '基础美术',
          name: '赵学海',
          grade: '二年级',
          class: '三班',
          phone: '13164430225',
          time: '2022-06-22 07:28:05',
          delete: '删除',
        },{
          num: '1443',
          school: '四川大学附属实验小学江安河分校',
          project: '口风琴弹奏表演',
          name: '郑夕川',
          grade: '三年级',
          class: '一班',
          phone: '15046076558',
          time: '2022-06-21 13:46:52',
          delete: '删除',
        },],
      }
    }
}
</script>

<style lang="less" scoped>
  .wrapper {
    background-color: rgba(247,248,250,1);
  }
  .header {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    box-shadow: 4px 4px 4px 4px #999;
    .logo {
      width: 131px;
      height: 26.4px;
      background: url(./static/logo.png);
      margin-left: 16px;
    }
    .info {
      width: 131px;
      height: 26.4px;
      margin-right: 16px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      div:nth-child(1) {
        width: 32px;
        height: 18px;
        background: url(./static/search.png) no-repeat;
      }
      div:nth-child(2) {
        width: 32px;
        height: 16px;
        background: url(./static/set.png) no-repeat;
      }
      div:nth-child(3) {
        width: 32px;
        height: 32px;
        background: url(./static/tx.png);
      }
    }
  }
  .nav {
    width: 100%;
    height: 40px;
    background-color: rgba(247,248,250,1);
    padding-left: 16px;
    line-height: 40px;
    font-size: 12px;
    span:nth-child(1) {
      color: #999;
      margin-right: 6px;
    }
  }
  .list {
    width: 96%;
    height: 800px;
    background-color: #fff;
    margin: 0 auto;
    margin-left: 16px;
    padding-left: 20px;
    padding-right: 20px;
    .list1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .demo-form-inline {
        width: 90%;
        .inp {
          width: 320px;
        }
        .inp2 {
          width: 400px;
        }
        .inp3 {
          margin-left: 24px;
        }
      }
      .sub {
        text-align: right;
        .sear {
          width: 80px;
          margin: 0;
          padding: 8px;
          margin-bottom: 18px;
          background-color: #165DFF;
          color: #fff;
        }
        .reset {
          width: 80px;
          margin: 0;
          padding: 8px;
          background-color: #F2F3F5;
        }
      }
    }
    .new {
      display: flex;
      justify-content: space-between;
      padding-top: 28px;
      .btn {
        width: 80px;
        padding: 6px;
        margin-bottom: 12px;
      }
      .new1 {
        background-color: #165DFF;
        color: #fff;
      }
      .out {
        background-color: #F2F3F5;
      }
    }
    .shanchu {
      color: red;
    }
  }
</style>